<template>
  <div class="change-class body-bg">
    <div v-if="!initLoading">
      <van-tabs sticky animated swipeable color="#00B7EE" :active="active" @change="changeTabs">
        <van-tab title="未使用">
          <ul class="change-content" v-if="list.length">
            <li class="change-items" v-for="(item,index) in list" :key="index">
              <div class="left">
                <img src="/static/images/my/coupon-bg.png" alt="bg">
                <p class="left-text">￥<span class="left-price">{{item.price}}</span></p>
                <p class="left-tips">{{item.tips}}</p>
              </div>
              <div class="right">
                <p class="overflow-tow title">{{item.title}}</p>
                <p class="endTime border-top">{{item.dateTime}} 前有效</p>
              </div>
            </li>
            <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
            <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
          </ul>
          <div v-else class="empty">
            <img src="/static/images/empty-icon.png" alt="空">
            <p class="empty-tips">暂无数据</p>
          </div>
        </van-tab>
        <van-tab title="已使用">
          <ul class="change-content" v-if="list.length">
            <li class="change-items" v-for="(item,index) in list" :key="index">
              <div class="left">
                <img src="/static/images/my/used.png" alt="bg">
                <p class="left-text">￥<span class="left-price">{{item.price}}</span></p>
                <p class="left-tips">{{item.tips}}</p>
              </div>
              <div class="right">
                <p class="overflow-tow title used">{{item.title}}</p>
                <p class="endTime border-top">{{item.dateTime}} 前有效</p>
              </div>
            </li>
            <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
            <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
          </ul>
          <div v-else class="empty">
            <img src="/static/images/empty-icon.png" alt="空">
            <p class="empty-tips">暂无数据</p>
          </div>
        </van-tab>
        <van-tab title="已过期">
           <ul class="change-content" v-if="list.length">
            <li class="change-items" v-for="(item,index) in list" :key="index">
              <div class="left">
                <img src="/static/images/my/used.png" alt="bg">
                <p class="left-text">￥<span class="left-price">{{item.price}}</span></p>
                <p class="left-tips">{{item.tips}}</p>
              </div>
              <div class="right">
                <p class="title used flex">
                  <span class="overflow-tow title-text">{{item.title}}</span>
                  <img class="over-time" src="/static/images/my/over-time-icon.png" alt="icon">
                </p>
                <p class="endTime border-top">{{item.dateTime}} 前有效</p>
              </div>
            </li>
            <li v-if="isReachBottom" class="pull-loading"><van-loading type="spinner" size="20px" color="#1989fa" /></li>
            <li v-if="isBottom" class="bottom-line">-- 亲，已经到最后了--</li>
          </ul>
          <div v-else class="empty">
            <img src="/static/images/empty-icon.png" alt="空">
            <p class="empty-tips">暂无数据</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-else class="init-loading"><van-loading type="spinner" color="#1989fa" /></div>
  </div>
</template>

<script>
import store from '../../store/globalStore'
export default {
  data() {
    return {
      initLoading: true, // 初始加载
      isBottom: false, // 是否加载完全部数据
      isReachBottom: false, // 是否显示加载状态
      active: 0,
      list: [
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟适用于单笔满2000美金跟随跟适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
        {state: 1, price: '100', title: '适用于单笔满2000美金跟随跟 投使用', tips: "满100可用", dateTime:'2019年12月12日'},
      ]
    }
  },
  onShow() {
    this.getShiftWorkList();
  },
  methods: {
    // 获取列表
    getShiftWorkList() {
      this.$fetch.shiftWork()
      .then(res=>{
        this.initLoading = false;
      }).catch(err=>{
        this.initLoading = false;
      })
    },
    // 切换tabs
    changeTabs(e) {
      console.log(e)
      this.active = e.mp.detail.index;
    },
  },
  // 下拉刷新
  onPullDownRefresh: function() {
    console.log("下拉刷新");
    wx.showNavigationBarLoading() //在标题栏中显示加载
    //模拟加载
    setTimeout(function(){
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },1500);
  },
  // 上拉加载
  onReachBottom () {
    let that = this;
    that.isReachBottom = true;
    wx.showNavigationBarLoading() //在标题栏中显示加载
    if(that.list.length<10){
      setTimeout(function(){
        that.isReachBottom = false;
        wx.hideNavigationBarLoading() //完成停止加载
        //模拟加载
        that.list = [...that.list,...that.list]
      },1500);
    } else {
      that.isReachBottom = false;
      that.isBottom = true;
      wx.hideNavigationBarLoading() //完成停止加载
    }
  },
}
</script>

<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  .van-tab__pane{
    min-height: calc(~"100vh - 60px");
  }
  .van-tab--active{
    .van-ellipsis{
      color: #00B7EE;
    }
  }
  .change-content{
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 10px;
    .change-items{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      margin-top: 10px;
      background: #fff;
      border-radius: 5px;
      .left{
        width: 110px;
        min-width: 110px;
        height: 95px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        img{
          width: 110px;
          height: 95px;
          position: absolute;
          top: 0;
          left: 0;
          display: block;
        }
        p{
          position: relative;
          z-index: 1;
        }
        .left-text{
          font-size: 14px;
        }
        .left-price{
          font-size: 34px;
          font-weight: bold;
        }
        .left-tips{
          font-size: 14px;
          margin-top: 8px;
        }
      }
      .right{
        height: 95px;
        flex-grow: 1;
        margin-left: 14px;
        padding-right: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title{
          width: 100%;
          font-size: 15px;
          color: #111;
          font-weight: bold;
          margin: 15px 0 0 0;
          &.used{
            color: #999;
          }
          &.flex{
            display: flex;
          }
          .title-text{
            flex-grow: 1;
            margin-right: 15px;
          }
          .over-time{
            min-width: 37px;
            width: 37px;
            height: 37px;
            display: block;
          }
        }
        .endTime{
          font-size: 12px;
          color: #999;
          padding: 10px 0 8px 0;
        }
      }
    }
  }
}
</style>
